<template>
  <div id="background">
    <div id="logo">
      <div>AG-NOTES</div>
    </div>

    <div id="login-container">
      <el-card style="max-width: 480px" class="login-card">
        <div id="form" class="ipt">
          <el-input v-model="form.username" style="width: 240px" placeholder="账号" />

          <el-input
              v-model="form.password"
              style="width: 240px"
              type="password"
              placeholder="密码"
              show-password
          />

          <el-button
              style="background-color: #AAB7BF"
              @click="handleLogin"
          >
            登录
          </el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<style scoped>
/* 保持你原有的样式不变 */
#background {
  background-color: #2c3e50;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

#logo {
  color: aliceblue;
  font-size: 25px;
  font-weight: 800;
  position: absolute;
  top: 7%;
  left: 5%;
}

#login-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  max-width: 420px;
  padding: 20px;
  box-sizing: border-box;
}

.ipt > * {
  margin: 5px;
}

.ipt > *:last-child {
  margin-bottom: 0;
}

:deep(.login-card) {
  background-color: #E9EFF2;
}

@media (max-width: 480px) {
  #login-container {
    width: 95%;
  }

  :deep(.login-card) {
    font-size: 18px;
    padding: 15px;
  }
}
</style>


<script>
import { login } from '@/api/auth'

export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      loading: false
    }
  },

  methods: {
    async handleLogin() {
      // 前端验证
      if (!this.form.username.trim()) {
        this.$message.error('请输入用户名')
        return
      }
      if (!this.form.password) {
        this.$message.error('请输入密码')
        return
      }

      this.loading = true

      try {
        // 提交登录请求
        const tokenData = await login(this.form)
        console.log('登录成功，令牌数据:', tokenData)

        // 存储 token（根据实际需求）
        localStorage.setItem('accessToken', tokenData.accessToken)
        // 或者使用 Vuex 存储
        console.log(localStorage.getItem('accessToken'));
        this.$message.success('登录成功')
        this.$router.push('/home')

      } catch (error) {
        console.error('登录失败:', error)
        this.$message.error(error.message || '登录失败')
      } finally {
        this.loading = false
      }
    }


  }
}
</script>
